﻿@using StudyTracker.Web.Models.Data
@model StudyTracker.Web.Models.Data.GraphModel

<div class="span-20 prepend-2">
	
	@{
		if (TempData["Message"] != null)
		{
			<h3>@TempData["Message"]</h3>
			<hr class="space" />
		}
	}

	@{
		if (Model.HasStudySessions)
		{
			var gillSans = "Gill Sans MT, Gill Sans, Trebuchet MS, Trebuchet, sans-serif";
			
			<script type="text/javascript">

				var chart;
				$(document).ready(function () {

					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'chart',
							type: 'spline',
							height: 350,
							borderWidth: 1,
							borderRadius: 1,
							borderColor: "#EAEAEA",
							spacingTop:30,
							spacingRight:40,
							spacingBottom:30,
							spacingLeft:30,
						},
						credits: {
							enabled: false
						},
						legend: {
							borderWidth: 0,
							itemStyle: {
								font: 'normal 14px @gillSans'
							}
						},
						series: @Html.Raw(Json.Encode(Model.Graph.DataSeries)),
						subtitle: {
							text: ''
						},
						title: {
							text: '@Model.Graph.Title',
							style: {
								font: 'bold 19px @gillSans'
							}
						},
						tooltip: {
							formatter: function () {
								return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%B %e', this.x) + ': ' + this.y + ' units';
							},
							style: {
								font: 'normal 13px @gillSans'
							}
						},
						xAxis: {
							type: 'datetime',
							labels: {
								formatter: function() {
									return Highcharts.dateFormat('%b %e', this.value);
								},
								style: {
									font: 'normal 12px @gillSans'
								}
							},
							lineWidth: 0
						},
						yAxis: {
							title: {
								text: '@Model.Graph.YAxisTitle',
								style: {
									font: 'normal 14px @gillSans'
								}
							},
							min: 0,
							labels: {
								style: {
									font: 'normal 12px @gillSans'
								}
							},
							gridLineWidth: 0,
							lineWidth: 0
						}
					});
				});
	
			</script>
			<div id="chart">
			</div>
		
			if (Model.GraphType == GraphType.Total)
			{
				@Html.ActionLink("Switch to Units per Day", MVC.Data.DailyGraph())
			}
	   
			if (Model.GraphType == GraphType.Daily)
			{
				@Html.ActionLink("Switch to Total Units", MVC.Data.TotalGraph())
			}
		}
	}
</div>

@Html.Action(MVC.Data.AddSingle())
